<template>
    <div class="sildemenu">
      <div class="container">
        <div class="topnav">全部分类</div>
        <div class="remmend">
            <span>欢迎来访</span><span>您是吴胭脂的第<span id="fangke"></span>位访客</span>
        </div>
        <div>
            <div class="left-menu">
                <div v-for="item in menudata" class="showexpres">{{item.name}}</div>
            </div>
            <div class="right-menu"></div>
        </div>
      </div>
      <div class="rightBack" @click="clickback">
          点<br/>击<br/>此<br/>处<br/>返<br/>回<br/>
          <span class="arrow">&larr;</span>
      </div>
       <!-- 视频 -->
   <video src="../../static/金玟岐 - 贝壳风铃.mp4" controls="controls">
    您的浏览器不支持 video 标签。
   </video>
    </div>
  </template>
  
  <script>
  export default {
    name: 'slidemenu',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        menudata:[
            {name:'个人简历'},
            {name:'纯css作品'},
            {name:'纯js作品'},
            {name:'混合作品'},
        ],
        couter:false,
      }
    },
    created:function(){   
        // var path = location.pathname;
        // if(localStorage[path]){
        //     localStorage[path] = parseInt(localStorage[path]) + 1
        // }else{
        //     localStorage[path] = 1;
        // }
        // console.log(localStorage[path]);
        // if(this.couter == false){
        //     var interval = setInterval(function(){
        //         var html = document.getElementById('fangke');
        //         console.log(html);
        //         html.innerHTML=localStorage[path];
        //         this.couter = true;    
        //     },500)
        // }else{
        //     clearInterval(interval);
        // }
        
        
    },
    methods:{
        // clickback(){
        //     this.$store.state.slideShow=false;
        // }
    }
  }
  </script>
  <style scoped>
    .sildemenu{font-size: 0.16rem;position: fixed;top: 0px;left: 0px;background-color:rgba(0, 0, 0, 0.45);height: 100vh;}
    /* 1 */
    .container{width: 85vw;float: left;}
    .topnav{height:45px;color: #333;line-height: 45px;text-align: center;overflow: hidden;background: #EEE;border-bottom: 1px solid #E1E1E1;}
    .remmend{height:40px;background-color: white;line-height: 40px;color: #333;}
    .remmend>span:nth-child(1){font-size: 0.15rem;}
    .remmend>span:nth-child(2){font-size: 0.14rem;margin-left:20px;}
    .left-menu{width: 28%;background: #EEE;float: left;font-size: 0.14rem;overflow-y: scroll;color: #9B9B9B;height: 600px;}
    .right-menu{width: 72%;background-color: slateblue;float: left;height: 600px;}
    .showexpres{height: 40px;line-height: 40px;text-align: center;border-bottom: 1px solid #E1E1E1;}
    /* 2 */
    .rightBack{width: 15vw;height: 100vh;float: left ;color: white;text-align: center;padding-top: 33vh;font-size: 0.14rem}
    .arrow{font-size: 0.20rem;}
  </style>
  